<template>
  <div class="warp">
    <div v-show="false" class="shopContainer">
      <div class="spacenav"></div>
      <div class="imgarea">
        <van-image
          width="375"
          height="375"
          lazy-load
          src="https://yanxuan.nosdn.127.net/3a6c77d8463d8675f4a0a0c80dbe4391.png"
          class="bgimg"
        />
        <div class="bgtext">去添加点什么吧</div>
      </div>
      <div class="pro">
        <div class="proplus">
          <div class="protext">开通Pro会员,享天天免邮</div>
          <div class="protext2">立即开通 ></div>
        </div>
      </div>
    </div>

    <div class="secondpage">
      <div class="allchangesale">
        <div class="saletop">
          <div class="saleleft">
            <div class="saletext1">全场换购</div>
          </div>
          <div class="saletopright">
            <div class="saletext2">已满0.01元,可选择十件商品换购</div>
            <div class="saletext3">去换购 ></div>
          </div>
        </div>

        <div class="swiper">
          <van-swipe>
            <van-swipe-item>
              <img src="../../assets/01.jpg" alt="" class="swiperimg" />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../../assets/01.jpg" alt="" class="swiperimg" />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../../assets/01.jpg" alt="" class="swiperimg" />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../../assets/01.jpg" alt="" class="swiperimg" />
            </van-swipe-item>
            <!-- <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          </template> -->
          </van-swipe>
        </div>
      </div>

      <div class="allchangesale">
        <div class="saletop">
          <div class="saleleft" checked="checked">
            <input type="radio" class="input" />
            <span class="saletext1">九元包邮</span>
          </div>
          <div class="saletopright">
            <div class="saletext2">还差100换购</div>
            <div class="saletext3">去换购 ></div>
          </div>
        </div>

        <van-swipe-cell class="cell" v-for="item in shopcart" :key="item.id">
          <!-- <div  > -->
          <!-- <van-icon name="checked" /> -->

          <!-- <van-radio class="radio" @click="selectGood(item)" :name="item.isChecked" ></van-radio> -->

          <div class="radio">
            <input type="radio" class="input" :checked="Boolean(item.isChecked)" @click="selectGood(item)" />
          </div>
          <van-card
            num="20"
            :price="item.skuPrice"
            :desc="item.skuName"
            title="限时特惠"
            class="goods-card"
            :thumb="item.imgUrl"
          />
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="deleteone(item.skuId)" />
          </template>
          <!-- </div> -->
          <!-- <template #:default>
            <div class="shopcar">
              <span>-</span>
              <input type="text">
              <span>+</span>
            </div>
          </template> -->
          <div class="cellcar">
            <button @click="sub(item)">-</button>
            <input type="text" class="cellcarinput" v-model="item.skuNum" />
            <button @click="add(item)">+</button>
          </div>
        </van-swipe-cell>
      </div>

      <div class="secondfooter">
        <!-- <div class="pro">
          <div class="proplus">
            <div class="protext">开通Pro会员,享天天免邮</div>
            <div class="protext2">立即开通 ></div>
          </div> 
        </div>-->

        <div class="subfooter">
          <van-submit-bar :price="allMoney * 100" button-text="提交订单" class="footerbar">
            <van-checkbox v-model="allChecked">全选</van-checkbox>
            <!-- <span margin-left:100px>详情</span> -->

            <template #button>
              <div>
                <van-cell is-link @click="showPopup" class="detail">详情</van-cell>

                <!-- <van-popup v-model:show="show" :style="{ padding: '64px' }">内容</van-popup> -->
                <van-popup
                  v-model:show="showBottom"
                  position="bottom"
                  :style="{ height: '30%' }"
                  closeable
                  close-icon-position="top-right"
                >
                  <template #default>
                    <div>
                      <div class="account">金额明细</div>
                      <div class="barone">
                        <span>商品总价</span>
                        <span>{{ allMoney }}</span>
                      </div>
                      <div class="barthree">
                        <span>优惠合计</span>
                        <span>-￥20</span>
                      </div>
                      <div class="bartwo">
                        <span>合计</span>
                        <span>{{ allMoney }}</span>
                      </div>
                    </div>
                  </template>
                </van-popup>
              </div>
              <button class="submit1" @click="submit1">提交</button>
            </template>

            <template #tip>
              <div class="sub">
                开通Pro会员,享天天免邮
                <sapn>查看更多 ></sapn>
              </div>
            </template>
          </van-submit-bar>
        </div>
      </div>
    </div>

    <router-view></router-view>

    <!-- <submit></submit> -->
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ShopCart'
})
</script>
<script lang="ts" setup>
import submit from './submit/index.vue'
import { onMounted, ref, computed } from 'vue'
import { useShopCartStore } from '../../stores/modules/shopCart'
import type { shopCartData } from '@/api/shopcart'
import { storeToRefs } from 'pinia'
import shopApi from '../../api/shopcart'
import { useRouter } from 'vue-router'
const shopcartList = useShopCartStore()
const { shopcart } = storeToRefs(shopcartList)
const router = useRouter()
// const allChecked = ref('0')

onMounted(() => {
  // console.log(categroyList.$state.category);
  // console.log(shopcart.value);
  // shopcart
  shopcartList.getshopcart()
  shopcartList.getUserToken()
  // console.log(shopcart);
  // shopcartList.delete()
})

// 单选选中点击事件
const selectGood = (good: shopCartData) => {
  // console.log();
  if (good.isChecked) {
    good.isChecked = 0
  } else {
    good.isChecked = 1
  }
  shopcartList.checkStatu(good.skuId, good.isChecked)
}

// 全选联动
const allChecked = computed<boolean>(() => {
  // console.log(shopcart.value.every(item => item.isChecked === 1));f

  return shopcart.value.every((item) => item.isChecked === 1)
})

// 切换全选
const changeChecked = (event: MouseEvent) => {
  // console.log(allChecked = event.target.checked);
}

// 跳转至支付页面
const submit1 = () => {
  // console.log(1111);

  router.push('/order')
}

// 删除单个
const deleteone = (skuId: string) => {
  // console.log(skuId);

  shopcartList.delete(skuId)
}

// 底部弹出层
const showBottom = ref(false)
const showPopup = () => {
  showBottom.value = true
}

// 购物车点击加一
const add = (item: any) => {
  // console.log(id);

  item.skuNum += 1
}

// 购物车点击减一
const sub = (item: any) => {
  // if (num.value === 1) {
  //   num.value -= 1
  // }else{
  //   num.value -= 1
  // }
  // num.value = 1

  if (item.skuNum > 1) {
    item.skuNum -= 1
  } else if (item.skuNum === 1) {
    item.skuNum === 1
  }
}

// 计算总价
const allMoney = computed(() => {
  let num = 0
  const list = shopcart.value.filter((item) => item.isChecked === 1)
  list.forEach((item) => {
    num += item.skuPrice * item.skuNum
  })
  return num
  // shopcart.value.reduce((prev,item)=>{
  //   if (item.isChecked) {
  //     prev += item.skuPrice * item.skuNum
  //   }
  //   return prev
  // },0)
})
</script>

<style lang="less">
.warp {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.radio {
  width: 20px;
  float: left;
  margin-top: 50px;
}

.shopContainer {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;

  .spacenav {
    width: 100%;
    height: 40px;
  }

  .imgarea {
    text-align: center;
    width: 100%;
    height: 396px;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .bgimg {
      //   margin-top: 40.01px;
      //   position: relative;
      background-color: #ffffff;
    }

    .bgtext {
      width: 100%;
      height: 21px;
      font-size: 14px;
      background-color: #ffffff;
      line-height: 21px;
      // position: absolute;
      // left: 30%;
      // bottom: 0;
    }
  }

  .pro {
    width: 100%;
    height: 40px;
    // background-color: #ffe0bd;
    // padding-left: 19px;

    .proplus {
      width: 375px;
      height: 40px;
      background-color: #ffe0bd;
      margin: auto;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin-right: 19px;
      position: absolute;
      bottom: 15%;
      border-top-left-radius: 5%;
      border-top-right-radius: 5%;
    }

    .protext {
      margin-left: 19px;
    }

    .protext2 {
      margin-right: 19px;
    }
  }
}

.secondpage {
  width: 100%;
  // height: 100vh;
  background-color: #f4f4f4;
  // position: relative;

  .allchangesale {
    width: 355px;
    // height: 146px;
    margin: 10px 10px 10px 10px;
    background-color: #ffffff;
    border-radius: 5%;

    .saletop {
      width: 355px;
      height: 44px;
      display: flex;
      line-height: 44px;
      justify-content: space-between;
      // align-items: center;
      margin-left: 12px;
      margin-right: 12px;

      .saleleft {
        width: 104px;
        height: 44px;

        // line-height: 44px;
        .input {
          width: 15px;
          height: 15px;
          // line-height: 15px;
        }

        .saletext1 {
          font-size: 16px;
          margin-left: 5px;
          font-weight: 700;
        }
      }

      .saletopright {
        width: 290px;
        height: 44px;
        display: flex;
        justify-content: flex-end;

        .saletext2 {
          font-size: 12px;
          margin-right: 8px;
        }

        .saletext3 {
          font-size: 12px;
          margin-right: 22px;
        }
      }
    }

    .swiper {
      height: 82px;

      .swiperimg {
        width: 225px;
        height: 70px;
      }
    }

    .cell {
      display: flex;
      width: 100%;
      height: 183px;
      flex-direction: column;
      align-items: center;
      position: relative;

      .input {
        width: 15px;
        height: 15px;
        line-height: 143px;
        display: inline-block;
        margin-top: 0px;
        // display: flex;
        align-items: center;
        flex-direction: column;
      }

      .goods-card {
        // margin-top: -25px;
        // background-color: @white;
        margin-left: 24px;
        // height: 114px;
        width: 311px;
        float: left;
      }

      .cellcar {
        width: 60px;
        // height: 40px;
        // background-color: aqua;
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;

        // border-radius: 50%;
        .cellcarinput {
          width: 25px;
          height: 25px;
          margin-left: 3px;
          margin-right: 3px;
        }
      }

      .delete-button {
        height: 100%;
      }
    }
  }

  .secondfooter {
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // position: absolute;
    // bottom: 200px;
    position: absolute;

    .pro {
      width: 100%;
      height: 40px;
      // background-color: #ffe0bd;
      // padding-left: 19px;
      position: absolute;
      bottom: -400px;

      .proplus {
        width: 375px;
        height: 40px;
        background-color: #ffe0bd;
        margin: auto;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 19px;
        position: absolute;
        bottom: 100;
        border-top-left-radius: 5%;
        border-top-right-radius: 5%;
      }

      .protext {
        margin-left: 19px;
      }

      .protext2 {
        margin-right: 19px;
      }
    }

    .subfooter {
      // position: relative;
      // bottom: 200px;
      // position: absolute;
      // bottom: -80px;
      position: fixed;
      bottom: 0px;
      .sub {
        display: flex;
        justify-content: space-between;
        color: black;

        .span {
          color: red;
        }
      }

      :deep(.van-submit-bar) {
        position: static;
      }

      .footerbar {
        position: fixed;
        bottom: 49px;
        position: relative;

        // width: 50px;
        .detail {
          width: 100px;
        }

        .submit1 {
          background-color: red;
          width: 50px;
          height: 30px;
        }

        .account {
          // margin: auto;
          font-size: 18px;
          // display: flex;
          text-align: center;
        }

        .barone {
          width: 351px;
          height: 48px;
          // background-color: aqua;
          padding-left: 12px;
          padding-right: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .barthree {
          width: 351px;
          height: 48px;
          // background-color: aqua;
          padding-left: 12px;
          padding-right: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: red;
        }

        .bartwo {
          width: 351px;
          height: 48px;
          // background-color: aqua;
          padding-left: 12px;
          padding-right: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          bottom: 0;
        }
      }
    }
  }

  .footerBox {
    height: 50px;
    width: 375px;
    background-color: aqua;
  }
}
</style>
